<template>
    <el-container>
        <!-- 左边侧边栏 -->
        <el-aside width="200px">
            <span>
                <i class="el-icon-dish"></i>
                李当家商家管理中心
            </span>
            <left-nav></left-nav>  <!-- 引入左边侧边栏（组件） -->
        </el-aside>

        <el-container>
            <!-- 顶部导航 -->
            <el-header>
                <top-nav></top-nav>  <!-- 引入顶部导航（组件） -->
            </el-header>

            <!-- 主体 -->
            <el-main>
                <router-view></router-view>  <!-- 主体（路由） -->
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import LeftNav from "@/views/index/LeftNav.vue";  //引入左边侧边栏
    import TopNav from "@/views/index/TopNav.vue";  //引入顶部导航
    export default {
        components:{
            LeftNav,
            TopNav,
        }
    }
</script>

<style lang="less" scoped>
    .el-container{
        height: 100%;
    }

    // 顶部导航
    .el-header {
        background-color: #ffffff;
        line-height: 60px;
    }
    
    // 左边侧边栏
    .el-aside {
        background-color: #304156;
        color: #ffd04b;
        font-size: 14px;
        overflow-x: hidden;

        span{
            display: block;
            padding: 20px;
        }

        // 图标
        i{
            width: 30px;
            height: 30px;
            color: #000;
            font-size: 20px;
            text-align: center;
            line-height: 30px;
            background-color: #ffd04b;
            border-radius: 50%;
        }
    }
    
    // 主体
    .el-main {
        background-color: #f0f2f5;
    }
</style>